<template>
  <view
    class="container"
    style="padding: 50rpx 20rpx 40rpx 20rpx"
    :style="{
      backgroundColor: activity.Content.backgroundColor,
      backgroundImage: activity.Content.backgroundImage
        ? 'url(' + Domain_IMG + activity.Content.backgroundImage + ')'
        : '',
      backgroundSize: activity.Content.backgroundSize,
      backgroundRepeat: activity.Content.backgroundRepeat,
    }"
  >
    <view
      style="height: 88rpx; display: flex; align-items: center; color: #fff"
    >
      <uni-icons type="left" size="25" @click="back()"></uni-icons>
    </view>
    <view>
      <view
        style="font-size: 60rpx; text-align: center; font-weight: 400"
        :style="{ Color: activity.title.color }"
        >健康好物 超值购</view
      >
      <view
        style="
          font-size: 30rpx;
          text-align: center;
          padding: 20rpx;
          color: #fff;
        "
        :style="{ Color: activity.subtitle.color }"
        >限时特惠 | 生活用品</view
      >
    </view>
    <!-- 推荐 -->
    <view v-for="(item, index) in list" :key="index">
      <view
        class="py-2 text-center font-weight-bold font-lg text-white"
        :style="{ Color: activity.Heading.color }"
        >{{ item.Column_Name }}</view
      >

      <view
        class="recommend rounded-lg font mb-2"
        :style="{ backgroundColor: activity.recommend.backgroundColor }"
        v-if="index != list.length - 1"
      >
        <scroll-view class="scroll-view_H" scroll-x="true">
          <view
            id="demo1"
            class="scroll-view-item_H mr-1 rounded-lg"
            :style="{
              backgroundColor: activity.scroll_view_item_H.backgroundColor,
            }"
            style="height: 100%"
            v-for="(item2, index2) in item.data"
            :key="index2"
            @click="
              handleDetails(
                item2.Article_SerialNumber,
                item2.Sales_Unit_Price_SerialNumber,
                item2.Store_SerialNumber
              )
            "
          >
            <image
              :src="Domain_IMG + item2.Picture_URL"
              mode="scaleToFill"
              class="img rounded-lg"
            />
            <view class="foot">
              <view class="font name text-ellipsis-2" style="height: 75rpx"
                >{{ item2.Article_Name }}
              </view>
              <view class="jg" :style="{ Color: activity.markdown.color }">
                仅剩:{{ item2.specifications[0].Stock_Remain }}
              </view>
              <view class="text-danger font-weight-bold font-lg">
                ￥{{ item2.specifications[0].Sales_Unit_Price }}
              </view>
              <!-- 加入购物车 -->
              <view
                class="flex justify-end"
                style="height: 80rpx; position: relative"
              >
                <view
                  v-if="
                    !Car.some(
                      (i) =>
                        i.Article_SerialNumber == item2.Article_SerialNumber
                    )
                  "
                  class="add flex justify-center align-center rounded-circle"
                  :style="{ backgroundColor: activity.Content.backgroundColor }"
                  style="
                    padding: 10rpx;
                    position: absolute;
                    right: 5px;
                    bottom: 5px;
                  "
                  @click.stop="
                    addShopCar(
                      item2.Store_SerialNumber,
                      item2.specifications[0].Sales_Unit_Price,
                      item2.specifications[0]
                        .Sales_Unit_Price_Stock_SerialNumber,
                      item2.Article_SerialNumber,
                      item2.specifications[0]
                        .Article_Specifications_SerialNumber,
                      item2.specifications[0].Unit_Price
                    )
                  "
                >
                  <uni-icons
                    type="plusempty"
                    color="white"
                    size="20"
                  ></uni-icons>
                </view>
                <view
                  v-else
                  class="flex justify-center align-center rounded-circle"
                  style="
                    padding: 0;
                    margin: 0;
                    position: absolute;
                    right: 5px;
                    bottom: 5px;
                  "
                >
                  <view
                    @click.stop="subGoods(item2.Article_SerialNumber)"
                    class="font-md text-center text-white flex justify-center align-center"
                    :style="{
                      backgroundColor: activity.Content.backgroundColor,
                    }"
                    style="width: 50rpx; height: 50rpx"
                    >-</view
                  >
                  <view
                    class="text-center font bg-white border"
                    style="
                      width: 50rpx;
                      height: 50rpx;
                      line-height: 50rpx;
                      padding: 0;
                    "
                    :style="
                      'border-top:1rpx solid ' +
                      activity.Content.backgroundColor +
                      ';border-bottom:1rpx solid ' +
                      activity.Content.backgroundColor +
                      '; color:' +
                      activity.Content.backgroundColor +
                      '; box-sizing: border-box;'
                    "
                  >
                    {{
                      parseInt(
                        Car.filter(
                          (i) =>
                            i.Article_SerialNumber == item2.Article_SerialNumber
                        )[0].Quantity
                      )
                    }}
                  </view>
                  <view
                    @click.stop="addGoods(item2.Article_SerialNumber)"
                    class="font-md text-center text-white flex justify-center align-center"
                    :style="{
                      backgroundColor: activity.Content.backgroundColor,
                    }"
                    style="width: 50rpx; height: 50rpx"
                    >+</view
                  >
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

      <view view class="rounded-lg font mb-2" v-else>
        <view
          class="tj"
          style="
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
          "
        >
          <view
            id="demo1"
            class="scroll-view-item_H mt-2 rounded-lg"
            v-for="(item2, index2) in item.data"
            :key="index2"
            @click="
              handleDetails(
                item2.Article_SerialNumber,
                item2.Sales_Unit_Price_SerialNumber,
                item2.Store_SerialNumber
              )
            "
          >
            <image
              :src="Domain_IMG + item2.Picture_URL"
              mode="scaleToFill"
              class="img rounded-lg"
            />
            <view class="foot">
              <view class="font name text-ellipsis-2" style="height: 75rpx"
                >{{ item2.Article_Name }}
              </view>
              <view class="jg" :style="{ Color: activity.markdown.color }">
                仅剩:{{ item2.specifications[0].Stock_Remain }}
              </view>
              <view class="text-danger font-weight-bold font-lg">
                ￥{{ item2.specifications[0].Sales_Unit_Price }}
              </view>
              <!-- 加入购物车 -->
              <view
                class="flex justify-end"
                style="height: 80rpx; position: relative"
              >
                <view
                  v-if="
                    !Car.some(
                      (i) =>
                        i.Article_SerialNumber == item2.Article_SerialNumber
                    )
                  "
                  class="add flex justify-center align-center rounded-circle"
                  :style="{ backgroundColor: activity.Content.backgroundColor }"
                  style="
                    padding: 10rpx;
                    position: absolute;
                    right: 5px;
                    bottom: 5px;
                  "
                  @click.stop="
                    addShopCar(
                      item2.Store_SerialNumber,
                      item2.specifications[0].Sales_Unit_Price,
                      item2.specifications[0]
                        .Sales_Unit_Price_Stock_SerialNumber,
                      item2.Article_SerialNumber,
                      item2.specifications[0]
                        .Article_Specifications_SerialNumber,
                      item2.specifications[0].Unit_Price
                    )
                  "
                >
                  <uni-icons
                    type="plusempty"
                    color="white"
                    size="20"
                  ></uni-icons>
                </view>
                <view
                  v-else
                  class="flex justify-center align-center rounded-circle"
                  style="
                    padding: 0;
                    margin: 0;
                    position: absolute;
                    right: 5px;
                    bottom: 5px;
                  "
                >
                  <view
                    @click.stop="subGoods(item2.Article_SerialNumber)"
                    class="font-md text-center text-white flex justify-center align-center"
                    :style="{
                      backgroundColor: activity.Content.backgroundColor,
                    }"
                    style="width: 50rpx; height: 50rpx"
                    >-</view
                  >
                  <view
                    class="text-center font bg-white border"
                    style="
                      width: 50rpx;
                      height: 50rpx;
                      line-height: 50rpx;
                      padding: 0;
                    "
                    :style="
                      'border-top:1rpx solid ' +
                      activity.Content.backgroundColor +
                      ';border-bottom:1rpx solid ' +
                      activity.Content.backgroundColor +
                      '; color:' +
                      activity.Content.backgroundColor +
                      '; box-sizing: border-box;'
                    "
                  >
                    {{
                      parseInt(
                        Car.filter(
                          (i) =>
                            i.Article_SerialNumber == item2.Article_SerialNumber
                        )[0].Quantity
                      )
                    }}
                  </view>
                  <view
                    @click.stop="addGoods(item2.Article_SerialNumber)"
                    class="font-md text-center text-white flex justify-center align-center"
                    :style="{
                      backgroundColor: activity.Content.backgroundColor,
                    }"
                    style="width: 50rpx; height: 50rpx"
                    >+</view
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--  -->
    <!-- 	<view style="display: flex; justify-content: center; align-items: center">
			<view class="rounded-lg bg-light font" style="width: 180rpx;height: 60rpx;display: flex;justify-content: center;align-items: center; margin: 20rpx 0; ">查看更多</view>
		</view> -->

    <view style="margin: 0 0 40rpx 0">
      <view style="text-align: center; font-size: 30rpx">活动规则</view>
      <view style="font-size: 24rpx; padding: 0 20rpx; margin: 20rpx 0 0 0"
        >* 活动页中具体价格说明，详见商品详情页底部</view
      >
    </view>
  </view>
</template>

<script>
import { WXAppStyle, WXActivityGoodsAll } from "@/api/global.js";
import { WXShopCarQuantity } from "@/api/WeChat.js";
import {
  WX2ColumnAction,
  WX2GoodsAllAction,
  WXCarouselChartAction,
  WXEditShopCarQuantity,
} from "@/api/article.js";
import times from "@/mixins/time.js";
const app = getApp();
export default {
  data() {
    return {
      Domain_IMG: app.globalData.Domain_IMG, //全局变量域名
      //模拟json
      list: [],
      activity: {
        Content: {
          //总背景
          backgroundColor: "#dc3545",
          backgroundImage: "/6c1e39e6b6bc4258537d8b6691d41e4.png", //背景图片
          backgroundSize: "100% auto", //尺寸
          backgroundRepeat: "no-repeat", //是否重复渲染
          Logo: true, //logo展示
        },
        title: {
          //主标题
          color: "#fff",
        },
        subtitle: {
          //副标题
          color: "#fff",
        },
        Heading: {
          //商品卡片标题
          color: "#fff",
        },
        recommend: {
          //滑动区域背景颜色
          backgroundColor: "#f5f5f5",
        },
        scroll_view_item_H: {
          //商品卡片颜色
          backgroundColor: "#fff",
          color: "#fff",
        },
        markdown: {
          //降价
          color: "#000",
        },
      },
      Car: [], //购物车数量
      total: 0, //数量
    };
  },
  onLoad() {
    if (app.globalData.openid != "") {
      this.ShopGoods();
    }
  },
  onReady() {
    this.WXAppStyle({
      Enterprise_Info_SerialNumber: app.globalData.enterprise,
      App_ID: app.globalData.appid,
    });
  },
  mounted() {},
  methods: {
    //获取购物车数量
    async ShopGoods() {
      const res = await WXShopCarQuantity({
        App_ID: app.globalData.appid,
        Open_ID: app.globalData.openid,
        Enterprise_Info_SerialNumber: app.globalData.enterprise,
      });
      if (res.Status == "success") {
        this.total = 0;
        res.Data.forEach((item) => {
          this.total = this.total + parseInt(item.Quantity);
        });
        this.Car = res.Data;
        console.log("car", this.Car);
      }
    },
    //时间
    time() {
      this.times = times.nowtime();
    },
    //加入购物车
    addShopCar(
      Store_SerialNumber,
      Sales_Unit_Price,
      Sales_Unit_Price_Stock_SerialNumber,
      Article_SerialNumber,
      Article_Specifications_SerialNumber,
      Unit_Price
    ) {
      console.log("Store_SerialNumber", Store_SerialNumber);
      console.log("Sales_Unit_Price", Sales_Unit_Price);
      console.log(
        "Sales_Unit_Price_Stock_SerialNumber",
        Sales_Unit_Price_Stock_SerialNumber
      );
      console.log("Article_SerialNumber", Article_SerialNumber);
      console.log(
        "Article_Specifications_SerialNumber",
        Article_Specifications_SerialNumber
      );
      console.log("Unit_Price", Unit_Price);
      //加入购物车
      this.time();
      if (!this.loading) {
        this.loading = true;
        uni.showLoading({
          title: "提交中...",
        });
        uni.request({
          header: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          url: app.globalData.Domain_Name + "/WXCheckShopCarAction", //
          method: "POST",
          data: {
            Open_ID: app.globalData.openid,
            App_ID: app.globalData.appid,
            Sales_Unit_Price_Stock_SerialNumber,
          },
          success: (res) => {
            if (res.data.length == 0) {
              uni.request({
                header: {
                  "Content-Type": "application/x-www-form-urlencoded",
                },
                url: app.globalData.Domain_Name + "/WXAddAction", //
                method: "POST",
                data: {
                  Data: JSON.stringify({
                    sales_order: [
                      {
                        Sales_Order_SerialNumber: "",
                        Store_SerialNumber: Store_SerialNumber,
                        Sales_Date: this.times,
                        Open_ID: app.globalData.openid,
                        Sales_Amount: Sales_Unit_Price,
                        Collection_Amount: 0,
                        Sales_ID: "xiaoshou1",
                        Receive_Type: 0,
                        Refund_Type: 0,
                        Row_Status: 8,
                        App_ID: app.globalData.appid,
                        Enterprise_Info_SerialNumber: app.globalData.enterprise,
                        Children: {
                          sales_order_detail: [
                            {
                              Sales_Order_Detail_SerialNumber: "",
                              Sales_Order_SerialNumber: "",
                              Sales_Unit_Price_Stock_SerialNumber:
                                Sales_Unit_Price_Stock_SerialNumber,
                              Article_SerialNumber: Article_SerialNumber,
                              Article_Specifications_SerialNumber:
                                Article_Specifications_SerialNumber,
                              Sign: "无货货主",
                              Quantity: 1,
                              Unit_Price: Unit_Price,
                              Sales_Unit_Price: Sales_Unit_Price,
                              Amount: Sales_Unit_Price,
                              Receive_Type: 0,
                              Refund_Type: 0,
                              Row_Status: 8,
                              Enterprise_Info_SerialNumber:
                                app.globalData.enterprise,
                            },
                          ],
                        },
                      },
                    ],
                  }),
                  Open_ID: app.globalData.openid,
                },
                success: (res) => {
                  if (res.data.Status == "success") {
                    uni.showToast({
                      title: "已加入购物车！",
                      icon: "none",
                    });
                    this.total++;
                    this.ShopGoods();
                  } else {
                    uni.showToast({
                      title: "系统繁忙！",
                      icon: "error",
                    });
                  }
                },
                complete: () => {
                  this.loading = false;
                  uni.hideLoading();
                },
              });
            } else {
              this.loading = false;
              uni.hideLoading();
              uni.showToast({
                title: "购物车存在该商品！",
                icon: "none",
              });
            }
          },
        });
      }
    },
    //把更多加入
    async subGoods(Article_SerialNumber) {
      if (this.loading) return;
      uni.showLoading({
        title: "提交中...",
      });
      this.loading = true;
      const res = await WXEditShopCarQuantity({
        Article_SerialNumber,
        Open_ID: app.globalData.openid,
        Type: 0,
      });
      this.loading = false;
      if (res.Status == "success") {
        const res1 = await WXShopCarQuantity({
          App_ID: app.globalData.appid,
          Open_ID: app.globalData.openid,
          Enterprise_Info_SerialNumber: app.globalData.enterprise,
        });
        if (res1.Status == "success") {
          this.total = 0;
          res1.Data.forEach((item) => {
            this.total = this.total + parseInt(item.Quantity);
          });
          this.Car = res1.Data;
          uni.hideLoading();
        }
      }
    },
    //把更多加入2
    async addGoods(Article_SerialNumber) {
      if (this.loading) return;
      uni.showLoading({
        title: "提交中...",
      });
      this.loading = true;
      const res = await WXEditShopCarQuantity({
        Article_SerialNumber,
        Open_ID: app.globalData.openid,
        Type: 1,
      });
      this.loading = false;
      if (res.Status == "success") {
        const res1 = await WXShopCarQuantity({
          App_ID: app.globalData.appid,
          Open_ID: app.globalData.openid,
          Enterprise_Info_SerialNumber: app.globalData.enterprise,
        });
        if (res1.Status == "success") {
          this.total = 0;
          res1.Data.forEach((item) => {
            this.total = this.total + parseInt(item.Quantity);
          });
          this.Car = res1.Data;
          uni.hideLoading();
        }
      }
    },
    //跳转详情
    handleDetails(
      Article_SerialNumber,
      Sales_Unit_Price_SerialNumber,
      Store_SerialNumber,
      Sales_Unit_Price
    ) {
      //点击进入"商品详情"页
      uni.navigateTo({
        url:
          "/pages/index/details?Article_SerialNumber=" +
          Article_SerialNumber +
          "&Sales_Unit_Price_SerialNumber=" +
          Sales_Unit_Price_SerialNumber +
          "&Store_SerialNumber=" +
          Store_SerialNumber +
          "&Sales_Unit_Price=" +
          Sales_Unit_Price +
          "&ShareOpenid=" +
          this.ShareOpenID,
      });
    },
    //获取数据
    async WXAppStyle(data) {
      const res = await WXAppStyle(data); //css样式
      if (res.Status == "success") {
        console.log(res);
        this.activity = res.Data.activity;
      }
      const res2 = await WXActivityGoodsAll({
        App_ID: app.globalData.appid,
        Enterprise_Info_SerialNumber: app.globalData.enterprise,
      });
      this.list = res2;
      console.log(this.list);
    },
    back() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.uni-icons {
  color: #fff;
}

.container {
  width: 100%;
  box-sizing: border-box;
  background: #68a1fb;

  .recommend {
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #f5f5f5;

    .scroll-view_H {
      white-space: nowrap;
      width: 100%;
    }

    .tj {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
  }

  .scroll-view-item_H {
    background-color: #fff;
    display: inline-block;
    color: #000;
    width: 229rpx;

    .img {
      width: 229rpx;
      height: 229rpx;
    }

    .foot {
      view {
        padding: 20rpx;
        box-sizing: border-box;
      }

      .name {
        padding: 0 20rpx;
        box-sizing: border-box;
        overflow: hidden;
        /* 隐藏超出容器的文本 */
        text-overflow: ellipsis;
        /* 当文本超出容器时显示省略号 */
        white-space: normal;
        /* 允许文本换行 */
        word-wrap: break-word;
        /* 强制换行 */
      }

      .jg {
        height: 50rpx;
        display: flex;
        align-content: center;
        line-height: 50rpx;

        image {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
  }
}
</style>